/**
 * Created by baidm in 2020/9/5 on 10:58
 */
import React from "react"

import "@/components/common/RotationChart/RotationChart.component.styl"

import filter from "@/filter/filterForService"

class RotationChart extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {

        let {imgPathList} = this.props.rotationData;

        const totateList = _.map(imgPathList, (item, index) => {
            return <div className="item-image-box" key={index}>
                <img src={filter("relativePath2Img")(item.url)} alt=""/>
                <div className="mask">
                    <span className="weather">{item.weather}℃</span>
                    <span className="name">{item.name}</span>
                    <span className={`status ${item.status === 0 ? "warn" : ""}`}>
                        {item.status === 0 ? "满承载" : ""}
                    </span>
                </div>
            </div>
        });

        const rotateBoxWidth = `${imgPathList.length * 317 + (imgPathList.length - 1) * 13}px`;

        return (
            <div className="rotation-chart">
                <div className="inner"
                     style={{width: rotateBoxWidth}}>
                    {totateList}
                </div>
            </div>
        )
    }
}

export default RotationChart
